<div class="config-card">
    <h4 class="mb-4"><i class="fas fa-list-ul me-2"></i>白名单列表</h4>
    
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th>模版ID</th>
                    <th>规则ID</th>
                    <th>规则名字</th>
                </tr>
            </thead>
            <tbody id="whiteListBody">
                <!-- 数据将动态加载到这里 -->
                <tr>
                    <td colspan="5" class="text-center text-muted py-4">
                        <div class="spinner-border spinner-border-sm" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                        正在加载白名单数据
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="d-flex justify-content-end mt-3">
        <button class="btn btn-outline-primary" onclick="refreshList()">
            <i class="fas fa-sync-alt me-2"></i>刷新列表
        </button>
    </div>
</div>


<script src="../static/js/main.js"></script>
<script src="../static/js/deleteWhiteList.js"></script>